import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import FormTextControls from '../../examples/Form/TextControls';
import FormInputSizes from '../../examples/Form/InputSizes';
import FormControlDisabled from '../../examples/Form/FormControlDisabled';
import InputReadOnly from '../../examples/Form/InputReadOnly';
import Plaintext from '../../examples/Form/Plaintext';
import FormFile from '../../examples/Form/FormFile';
import ColorPicker from '../../examples/Form/ColorPicker';

# Form controls

<p className="lead">
  Give textual form controls like <code>{'<input>'}</code>s and{' '}
  <code>{'<textarea>'}</code>s an upgrade with custom styles, sizing, focus
  states, and more.
</p>

## Example

For textual form controls—like `input`s and `textarea`s—use the `FormControl` component.
FormControl adds some additional styles for general appearance, focus
state, sizing, and more.

<ReactPlayground codeText={FormTextControls} />

## Sizing

Use `size` on `<FormControl>` to change the size of the input.

<ReactPlayground codeText={FormInputSizes} />

## Disabled

Add the `disabled` prop on an input to give it a grayed out appearance and remove pointer events.

<ReactPlayground codeText={FormControlDisabled} />

## Readonly

Add the `readOnly` prop on an input to prevent modification
of the input's value. Read-only inputs appear lighter (just like
disabled inputs), but retain the standard cursor.

<ReactPlayground codeText={InputReadOnly} />

## Readonly plain text

If you want to have readonly elements in your form styled as plain text,
use the `plaintext` prop on FormControls to remove the
default form field styling and preserve the correct margin and padding.

<ReactPlayground codeText={Plaintext} />

## File input

<ReactPlayground codeText={FormFile} />

## Color

<ReactPlayground codeText={ColorPicker} />

## API

<ComponentApi metadata={props.data.FormControl} exportedBy={props.data.Form} />

export const query = graphql`
  query FormControlQuery {
    Form: componentMetadata(displayName: { eq: "Form" }) {
      ...ComponentApi_metadata
    }
    FormControl: componentMetadata(displayName: { eq: "FormControl" }) {
      ...ComponentApi_metadata
    }
  }
`;
